<template>
  <div>
    <!--mask-->
    <div class="mobile_mask" v-show="mobileMask" @click="close_mobile_agent_apply"></div>

    <!--申请加盟模态框-->
    <div class="bg_fff mobile_agent_apply_modal">
      <div class="consult_title"><p>申请成为学妹加盟商</p><div class="consult_modal_close" @click="close_mobile_agent_apply"></div></div>
      <div class="mobile_agent_modal_body">
        <div class="mobile_apply_inp_group clear">
          <div class="group_left_title">
            <p class="text-right">申请人姓名<span class="col_2577EF">*</span></p>
          </div>
          <div class="grout_right_inp">
            <input type="text" class="border_999" maxlength="10" id="mobile_apply_name">
          </div>
        </div>

        <div class="margin_top_12 mobile_apply_inp_group clear">
          <div class="group_left_title">
            <p class="text-right">申请人手机 <span class="col_2577EF">*</span></p>
          </div>
          <div class="grout_right_inp">
            <input type="text" class="border_999" maxlength="11" id="mobile_apply_tel">
          </div>
        </div>

        <div class="margin_top_12 mobile_apply_inp_group clear">
          <div class="group_left_title">
            <p class="text-right">短信验证码 <span class="col_2577EF">*</span></p>
          </div>
          <div class="grout_right_qrcode">
            <div class="font_0">
              <input type="number" class="border_999 font_16" id="mobile_apply_qrcode">
              <button type="button" class="bg_2577EF col_fff font_12 mobile_get_qrcode" @click="modal_qrcode_btn($event)">获取验证码</button>
            </div>
          </div>
        </div>

        <div class="margin_top_12 mobile_apply_inp_group clear">
          <div class="group_left_title">
            <p class="text-right">代理地区<span class="col_2577EF">*</span></p>
          </div>

          <div class="mobile_city_select">
            <select id="mobile_apply_province" name="mobile_apply_province" class="form-control"></select>

            <select id="mobile_apply_city" name="mobile_apply_city" class="margin_left_10 form-control"></select>

            <select id="mobile_apply_cmbArea" class="form-control margin_left_10"></select>
          </div>

        </div>

        <div class="margin_top_12 mobile_apply_inp_group clear">
          <div class="group_left_title">
            <p class="text-right">公司名称</p>
          </div>
          <div class="grout_right_inp">
            <input type="text" class="border_999" maxlength="30" id="mobile_apply_company">
          </div>
        </div>

        <button type="button" class="bg_2577EF margin_top_10 col_fff sub_agent_apply" @click="mobile_sub_agent_apply($event)">提交申请</button>

        <div class="col_999 margin_top_12 font_14 mobile_agent_apply_bottom">
          <p>提交申请后，我们会尽快与您联系。</p>
          如有问题，请拨打电话：<a href="tel://021-67680297" class="col_999">021-67680297</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import sity_address from '@/js/city-address.js'
  //每个子组价都需要抛出
  export default{
    name: "mobile_agent_modal",
    methods: {
      /**
       * PC端
       * 点击查询代理商
       * **/
      search_agent_btn(){
        let that = this;
        that.agent_arr = [];
        //获取省，市，县
        let modal_province = $("#modal_province option:selected").text();
        let modal_city = $("#modal_city option:selected").text();
        let modal_cmbArea = $("#modal_cmbArea option:selected").text();
        let modal_select_str = modal_province + modal_city + modal_cmbArea;
        that.base.ajax_get('/site/new/join/shop?select=' + modal_select_str, function (data) {
          if (data.status == 0) {
            //如果有数据隐藏无数据提示信息
            if (data.detail.length !== 0) {
              //有加盟商信息，则隐藏无加盟商提示
              that.no_agent = false;
              that.agent_arr = data.detail;
            } else {
              //无加盟商信息，则显示无加盟商提示。和显示未查询到
              that.no_query = false;
              that.no_agent = true;
            }
          } else {
            alert(data.detail)
          }
        });
      },

      /**
       *移动端
       * 点击关闭加盟商申请
       * **/
      close_mobile_agent_apply(){
        let that = this;
        $(".mobile_agent_apply_modal").animate({"height": 0}, '500', 'swing');
        that.$emit('close_agent_apply', false);
      },

      /**
       * mobile申请模态框请求验证码
       * **/
      modal_qrcode_btn(e){
        let obj = window.event || e;
        let event_target = obj.target || obj.srcElement;
        let that = this;
        let agent_tel = $("#mobile_apply_tel").val();
        let countdown = 60;
        that.base.ajax_post("/site/get/mobile/msg/code", {"phone": agent_tel}, function (data) {
          if (data.status == 0) {
            /**
             * 请求成功，倒计时开始
             * **/
            settime(obj);
            function settime() {
              if (countdown == 0) {
                $(event_target).attr("disabled", false).text("获取验证码").removeClass("bg_B1B3B5").addClass("bg_2577EF");
                countdown = 60;
                return;
              } else {
                $(event_target).attr("disabled", true).text(countdown + "s").removeClass("bg_2577EF").addClass("bg_B1B3B5");
                countdown--;
              }
              setTimeout(function () {
                settime(obj)
              }, 1000)
            }
          } else {
            alert(data.detail)
          }
        });
      },

      /**
       * mobile
       * 提交加盟商申请
       * checkStringNull ：非空校验
       * 如果表单合法，则请求数据
       * **/
      mobile_sub_agent_apply(){
        let that = this;
        let agent_name = $("#mobile_apply_name").val();
        let agent_tel = $("#mobile_apply_tel").val();
        let agent_qrcode = $("#mobile_apply_qrcode").val();
        let agent_company = $("#mobile_apply_company").val();
        let agent_address = $("#mobile_apply_province option:selected").text() + $("#mobile_apply_city option:selected").text() + $("#mobile_apply_cmbArea option:selected").text();
        if (that.checkStringNull(agent_name) == false && that.checkStringNull(agent_tel) == false && that.checkStringNull(agent_qrcode) == false) {
          that.base.ajax_post('/mdp/applicant/join/shop', {
            "name": agent_name,
            "phone": agent_tel,
            "code": agent_qrcode,
            "title": agent_company,
            'address': agent_address
          }, function (data) {
            if (data.status == 0) {
              $(".mobile_agent_apply_modal").animate({"height": 0}, '500', 'swing');
              that.$emit('close_agent_apply', false);
              alert("提交成功！")
            } else {
              alert(data.detail)
            }
          })
        } else {
          alert("请完善信息再提交")
        }
      },


      /**
       * 移动端
       * 点击搜索查询加盟商
       * **/
      mobile_search_agent(){
        let that = this;
        let data = 0;
        //如果没有数据显示无加盟商
        if (data == 0) {
          that.mobile_no_search_agent = false;
        } else {
          that.mobile_no_agent = false
        }
      }
    },
    //在模板渲染之后调用
    mounted () {
      /**
       * mobile三级联动插件
       * **/
      sity_address.address('mobile_apply_province', 'mobile_apply_city', 'mobile_apply_cmbArea');
    },
    props:{
        mobileMask:Boolean//定义传值类型
    },
    data () {
      return {
        mobile_no_agent: true,
        mobile_no_search_agent: true
      }
    }
  }
</script>

<style scoped>
  ::-webkit-scrollbar { /*隐藏滚轮*/
    display: none;
  }

  .mobile_agent_apply_modal {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 999;
  }
  .mobile_agent_modal_body{
    padding: 20px 15px;
  }
  .mobile_apply_inp_group{
    height: 36px;
    line-height: 36px;
  }
  .mobile_apply_inp_group .group_left_title{
    float: left;
    width: 6em;
    margin: 0;
  }
  .mobile_apply_inp_group .grout_right_inp,.grout_right_qrcode,.mobile_city_select{
    float: left;
    width: calc(100% - 7em);
    margin-left: 1em;
    line-height: 32px;
  }
  .grout_right_qrcode{

  }

  .grout_right_inp input{
    width: 100%;
  }

  .mobile_get_qrcode{
    width: 6em;
    height: 36px;
    line-height: 36px;
  }
  .grout_right_qrcode input{
    width: calc(100% - 4.5em);
  }
  .mobile_city_select select{
    width: calc(33.333% - 7px);
    float: left;
    border: 1px solid #999999;
    border-radius: 0;
  }
  .sub_agent_apply{
    width: 100%;
    line-height: 36px;
  }
  .mobile_agent_apply_bottom p{
    margin: 0 auto;
  }

</style>
